<template>
	<div
	  class="diy_edit goods_edits page_i_want_to_customize"
	  id="i_want_to_customize_edit"
	>
	  <el-form
		:model="form"
		ref="ruleFormRef"
		:rules="rules"
		label-width="auto"
		class="edit_goods_form"
		size="large"
	  >
	  <el-row class="row_e">
			<el-col :xs="24" :sm="12" :lg="8" class="el_form_item_warp">
				<el-form-item label="封面图" prop="avatar">
					<el-upload class="avatar-uploader" drag accept="image/gif, image/jpeg, image/png, image/jpg"
							   action="" :http-request="uploadimg" :show-file-list="false">
						<img v-if="form.img"   :src="$fullUrl($banseUrl, form.img)" class="avatar">
						<el-icon v-else><Plus /></el-icon>
					</el-upload>
				</el-form-item>
			</el-col>

			<el-col :xs="24" :sm="12" :lg="8" class="el_form_item_warp">
				<el-form-item label="主图_1" prop="avatar">
					<el-upload class="avatar-uploader" drag accept="image/gif, image/jpeg, image/png, image/jpg"
						action="" :http-request="uploadimg_1" :show-file-list="false">
						<img v-if="form.img_1" :src="$fullUrl($banseUrl,form.img_1)" class="avatar">
						<el-icon v-else><Plus /></el-icon>
					</el-upload>
				</el-form-item>
			</el-col>

			<el-col :xs="24" :sm="12" :lg="8" class="el_form_item_warp">
				<el-form-item label="主图_2" prop="avatar">
					<el-upload class="avatar-uploader" drag accept="image/gif, image/jpeg, image/png, image/jpg"
						action="" :http-request="uploadimg_2" :show-file-list="false">
						<img v-if="form.img_2" :src="$fullUrl($banseUrl,form.img_2)" class="avatar">
						<el-icon v-else><Plus /></el-icon>
					</el-upload>
				</el-form-item>
			</el-col>

			<el-col :xs="24" :sm="12" :lg="8" class="el_form_item_warp">
				<el-form-item label="主图_3" prop="avatar">
					<el-upload class="avatar-uploader" drag accept="image/gif, image/jpeg, image/png, image/jpg"
						action="" :http-request="uploadimg_3" :show-file-list="false">
						<img v-if="form.img_3" :src="$fullUrl($banseUrl,form.img_3)" class="avatar">
						<el-icon v-else><Plus /></el-icon>
					</el-upload>
				</el-form-item>
			</el-col>

			<el-col :xs="24" :sm="12" :lg="8" class="el_form_item_warp">
				<el-form-item label="主图_4" prop="avatar">
					<el-upload class="avatar-uploader" drag accept="image/gif, image/jpeg, image/png, image/jpg"
						action="" :http-request="uploadimg_4" :show-file-list="false">
						<img v-if="form.img_4" :src="$fullUrl($banseUrl,form.img_4)" class="avatar">
						<el-icon v-else><Plus /></el-icon>
					</el-upload>
				</el-form-item>
			</el-col>

			<el-col :xs="24" :sm="12" :lg="8" class="el_form_item_warp">
				<el-form-item label="主图_5" prop="avatar">
					<el-upload class="avatar-uploader" drag accept="image/gif, image/jpeg, image/png, image/jpg"
						action="" :http-request="uploadimg_5" :show-file-list="false">
						<img v-if="form.img_5" :src="$fullUrl($banseUrl,form.img_5)" class="avatar">
						<el-icon v-else><Plus /></el-icon>
					</el-upload>
				</el-form-item>
			</el-col>

			<el-col :xs="24" :sm="12" :lg="12" class="el_form_item_warp">
				<el-form-item label="标题" prop="title">
					<el-input v-model="form.title" placeholder="请输入标题"></el-input>
				</el-form-item>
			</el-col>

			<el-col :xs="24" :sm="12" :lg="12" class="el_form_item_warp">
				<el-form-item label="描述" prop="description">
					<el-input v-model="form.description" placeholder="请输入描述"></el-input>
				</el-form-item>
			</el-col>

			<el-col :xs="24" :sm="12" :lg="8" class="el_form_item_warp">
				<el-form-item label="原价" prop="price_ago">
					<el-input-number v-model="form.price_ago"></el-input-number>
				</el-form-item>
			</el-col>

			<el-col :xs="24" :sm="12" :lg="8" class="el_form_item_warp">
				<el-form-item label="卖价" prop="price">
					<el-input-number v-model="form.price"></el-input-number>
				</el-form-item>
			</el-col>

			<el-col :xs="24" :sm="12" :lg="8" class="el_form_item_warp">
				<el-form-item label="点击量" prop="hits">
					<el-input-number v-model="form.hits" placeholder="请输入点击量"></el-input-number>
				</el-form-item>
			</el-col>

			<el-col :xs="24" :sm="12" :lg="8" class="el_form_item_warp">
				<el-form-item label="销量" prop="sales">
					<el-input-number v-model="form.sales" placeholder="请输入销量"></el-input-number>
				</el-form-item>
			</el-col>

			<el-col :xs="24" :sm="12" :lg="8" class="el_form_item_warp">
				<el-form-item label="分类" prop="type">
					<el-select v-model="form.type">
						<el-option v-for="(o ,i) in list_goods_type" :value="o.name" :key="i"
							:label="o.name"></el-option>
					</el-select>
				</el-form-item>
			</el-col>

			<el-col :xs="24" :sm="12" :lg="8" class="el_form_item_warp">
				<el-form-item label="库存" prop="inventory">
					<el-input-number v-model="form.inventory" placeholder="请输入库存"></el-input-number>
				</el-form-item>
			</el-col>

			<el-col :xs="24" :sm="24" :lg="24" class="el_form_editor_warp">
				<el-form-item label="正文" prop="content">
					<form_editor
						class="editor el_form_editor_warp"
						:form="form"
						@blur_comment="blur_comment"
						@update_comment="update_comment"
						:publish_flag="false"
					/>
				</el-form-item>
			</el-col>
		</el-row>
		<div class="footer">
		  <el-button type="primary" @click="Onsubmit" size="large"
			>提交</el-button
		  >
		  <el-button @click="cancel()" size="large">取消</el-button>
		</div>
	  </el-form>
	</div>
  </template>
  
  <script setup>
  import { ElMessage } from "element-plus";
  import { ref, onMounted } from "vue";
  import { $post, $get } from "@/api/Api.js";
  import storageHelper from "@/libs/StorageHelper";
  import { useStore } from "vuex";
  import { useRouter } from "vue-router";
  import {
	$fullUrl,
	$banseUrl,
	$check_action,
	$getUrlParams,
	filterSensitiveWords,
  } from "@/utils/utils.js";
  let router = useRouter();
  let store = useStore();
  let token = storageHelper.getToken() || null;
  let UserInfo = storageHelper.getUserInfo();
  let user_id  = storageHelper.getUserInfo().user_id ;
  // let nickname = storageHelper.getUserInfo().nickname;
  let goods_id = $getUrlParams().goods_id;
  let url_add = ref("/api/goods/add");
  let url_set = ref("/api/goods/set");
  let url_get_obj = ref("/api/goods/get_obj");
  let url_upload = ref("/api/goods/upload");
  let list_goods_type = ref([]);
  let disabledObj = ref({
	nickname_disabled: false,
	// email_disabled:false,
	// phone_disabled:false
  });
  let form = ref({
	goods_id: 0,
	title: "",
	img: "",
	description: "",
	price_ago: 0,
	price: 0,
	sales: 0,
	inventory: 0,
	type: '',
	hits: 0,
	content: "",
	img_1: "",
	img_2: "",
	img_3: "",
	img_4: "",
	img_5: "",
	source_table: "",
	source_field: "",
	source_id: 0,
	user_id:user_id
  });
  
  let ruleFormRef = ref(null);
  let rules = ref({
	title: [
	  {
		required: true,
		message: "标题不能为空",
		trigger: "blur",
	  },
	],
  });
  //获取分类
  let get_goods_type = async () => {
	let json = await $get("/api/goods_type/get_list");
	if (json.result) {
	  list_goods_type.value = json.result.list;
	} else if (json.error) {
	  console.error(json.error);
	}
  };
  // 富文本编辑器更新
  let update_comment = (obj) => {
	form.value.content = obj;
  };
  let blur_comment = (obj) => {
	form.value.content = obj;
  };
   // 封面图
   let uploadimg= (param) => {
	uploadFile(param.file, "img");
  };
  // 上传封面图1
  let uploadimg_1 = (param) => {
	uploadFile(param.file, "img_1");
  };
    // 上传封面图2
	let uploadimg_2 = (param) => {
	uploadFile(param.file, "img_2");
  };
    // 上传封面图3
	let uploadimg_3 = (param) => {
	uploadFile(param.file, "img_3");
  };
    // 上传封面图4
	let uploadimg_4 = (param) => {
	uploadFile(param.file, "img_4");
  };
    // 上传封面图5
	let uploadimg_5 = (param) => {
	uploadFile(param.file, "img_5");
  };
  /**
   * 上传封面图
   * @param {Object} file 文件对象
   * @param {key} 保存键名
   */
  const uploadFile = (file, key = "img") => {
	var formobj = new FormData(); // FormData 对象
	formobj.append("file", file); // 文件对象
	$upload(url_upload.value, formobj, function (json) {
	  if (json.result) {
		form.value[key] = json.result.url;
	  } else {
		ElMessage.error("上传失败！");
	  }
	});
  };
  /**
   * 上传文件
   * @param {String} url 请求地址
   * @param {Object} body 请求参数
   * @param {Funciton} func 回调函数，可以为空，为空则采用await返回值
   * @return {Object} 返回请求结果
   */
  let $upload = async (url, body, func) => {
	url = url.replace("~/", $banseUrl);
  
	if (func) {
	  // 如果回调函数存在, 则采用异步
	  $post(url, body, {
		headers: {
		  "x-auth-token": token,
		  "Content-Type": "multipart/form-data",
		},
	  })
		.then((res) => {
		  func(res);
		})
		.catch((res) => {
		  func(res);
		});
	} else {
	  // 否则采用同步
	  var res = await $post(url, body, {
		headers: {
		  "x-auth-token": token,
		  "Content-Type": "multipart/form-data",
		},
	  });
	  return res;
	}
  };
  // 点击取消
  let cancel = () => {
	router.go(-1);
  };
  // 点击提交
  let Onsubmit = async () => {
	let valid = await ruleFormRef.value.validate();
	if (valid) {
	  // 提交表单
	  if(goods_id){
		  // 编辑
		  delete form.value.update_time;
		  $post(url_set.value+"?goods_id=" + goods_id, form.value).then((res) => {
			  if (res.result) {
			  ruleFormRef.value.resetFields();
			  router.push("./table");
			  ElMessage.success("提交成功！");
			  } else if (res.error) {
			  ElMessage.error(res.error.message);
			  }
		  });
	   
	  }else{
		  // 新增
		  $post(url_add.value, form.value).then((res) => {
			  if (res.result) {
			  ruleFormRef.value.resetFields();
			  router.push("./table");
			  ElMessage.success("提交成功！");
			  } else if (res.error) {
			  ElMessage.error(res.error.message);
			  }
		  });
  
	  }
	} else {
	  ElMessage.error(msg);
	}
  };
  // 获取留言详情
  let get_goods_obj = async () => {
	var list = await $get("/api/goods/get_obj?goods_id=" + goods_id);
	form.value = list.result.obj;
  };
  onMounted(() => {
	get_goods_type();
	if(goods_id){
		get_goods_obj();
	}
	
  });
  </script>
  
  <style scoped lang="less">
  .diy_edit {
	width: 100%;
	.edit_goods_form {
	  max-width: 60%;
	  margin: 90px auto;
	  .fn {
		width: 100%;
	  }
	}
	img {
	  width: 100px;
	  height: 100px;
	}
	.edit_list_goods_sell {
	  width: 80%;
	  margin: 90px auto;
	}
	.footer {
	  text-align: center;
	}
  }
  </style>
  